<template>
	<view class="pay">
		<view class="payorder">
			<view class="payNumber">订单号:{{ outTradeNo }}</view>
			<view class="payPrice">
				<text>¥</text>
				{{ totalAmount }}
			</view>
			<view class="payTime"><!-- 最迟支付时间:{{payinfo.end_time}} --></view>
		</view>
		<view class="payType">
			<view class="payTypeTitle">请选择支付方式</view>
			<radio-group @change="radioChange">
				<view class="payTypeItem">
					<view class="payTypeItemLeft">
						<image src="../../static/pay/alipay.png" class="payicon"></image>
						支付宝支付
					</view>
					<radio color="#01c2fa" value="1" checked=""></radio>
				</view>
				<view class="payTypeItem">
					<view class="payTypeItemLeft">
						<image src="../../static/pay/wxpay.png" class="payicon"></image>
						微信支付
					</view>
					<radio color="#01c2fa" value="2"></radio>
				</view>
			</radio-group>
		</view>
		<view class="payButton" @click="pay">确定支付</view>

		<!-- 添加支付表单区域 -->
		<div id="divform"></div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			paytype: 1,
			payForm: '', //初始化支付表单
			totalAmount: 200, //初始化总支付金额
			outTradeNo: '' //初始化主订单号
		};
	},
	onLoad(option) {
		this.outTradeNo = option.outTradeNo;
		this.totalAmount = option.countmoney;
		console.log('支付宝买家账号：exnylw8467@sandbox.com,支付宝登录密码 ：111111,支付宝支付密码：111111');
	},
	methods: {
		// 切换支付方式
		radioChange() {},
		pay() {
			this.$http({
				url: 'alipay',
				method: 'post',
				data: {
					outTradeNo: this.outTradeNo,
					totalAmount: this.totalAmount,
					type: 1
				}
			}).then(res => {
				console.log(res);
				//将返回的结果添加到支付表单区域
				let divform = document.querySelector('#divform');
				divform.innerHTML = res.list;
				// 提交追加的支付表单 跳转到支付宝支付页面  document.forms[0] 是res.list返回的表单
				document.forms[0].submit();
			});
		}
	}
};
</script>

<style>
/* 引入样式 */
@import '@/static/css/pay.css';
</style>
